<template>
  <zm-view ref="view">
    <view class="py-20 px-24">
      <view class="bg-white radius-16 py-30 px-20 flex items-center" @click="onChooseImage">
        <text class="font-30 font-700 text-row-1">头像</text>
        <view class="ml-auto flex items-center">
          <u-image :src="userInfo.headImg" width="120rpx" height="120rpx" radius="50%"></u-image>
          <view class="ml-20 flex">
            <zm-icon name="arrow" size="32rpx" color="#cccccc" weight="bold"></zm-icon>
          </view>
        </view>
      </view>

      <zm-cell-group border-radius="16rpx" title-size="30rpx" content-size="30rpx" content-color="#999999" right-icon-size="32rpx" right-icon-color="#cccccc" custom-class="mt-20">
        <zm-cell title="昵称" :content="userInfo.nickName" is-link :border="false" height="96rpx" padding="0 20rpx" @click="handleClickNiceName"></zm-cell>
        <zm-cell title="性别" :content="sexText" is-link :border="false" height="96rpx" padding="0 20rpx" @click="showSexAction = true"></zm-cell>
        <zm-cell title="生日" :content="userInfo.birthday || '仅支持首次填写有效'" is-link :border="false" height="96rpx" padding="0 20rpx" @click="showBirthday = true"></zm-cell>
        <zm-cell title="注册时间" :content="userInfo.createTime" :clickable="false" :border="false" height="96rpx" padding="0 20rpx"></zm-cell>
      </zm-cell-group>
    </view>

    <zm-footer safe-area-inset-bottom>
      <view class="py-36 px-24 flex flex-col">
        <zm-button type="primary" size="large" round @click="handleLogout">退出登录</zm-button>
      </view>
    </zm-footer>

    <!-- 昵称输入 -->
    <zm-dialog :show.sync="showNickName" title="输入昵称" show-cancel-button @cancel="handleCancelNickName" @confirm="handleSetNickName">
      <view class="w-full bg-page p-24 radius-12">
        <u-input v-model="nickName" border="none" placeholder="昵称不超过10个字" maxlength="10"></u-input>
      </view>
    </zm-dialog>

    <!-- 性别 -->
    <zm-action-sheet :show.sync="showSexAction" title="请选择性别" :actions="sexActions" @select="handleSelectSex"></zm-action-sheet>

    <!-- 生日 -->
    <u-datetime-picker
      v-model="curDate"
      mode="date"
      :min-date="minDate"
      :max-date="maxDate"
      :show="showBirthday"
      :confirm-color="useColor('theme')"
      @cancel="showBirthday = false"
      @confirm="handleSelectBirthday"
    ></u-datetime-picker>

    <!-- 退出登录提示 -->
    <zm-dialog ref="dialog"></zm-dialog>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import base64 from "@/utils/encode/base64"
import { mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      curDate: "",
      minDate: "",
      maxDate: "",
      nickName: "",
      showSex: false,
      showNickName: false,
      showSexAction: false,
      sexActions: [
        { title: "男", value: "1" },
        { title: "女", value: "2" }
      ],
      showBirthday: false,
      birthday: ""
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
    sexText() {
      return this.userInfo.sex == "1" ? "男" : this.userInfo.sex == "2" ? "女" : "请选择性别"
    }
  },
  onLoad() {
    this.curDate = new Date()
    this.maxDate = new Date().getTime()
    this.minDate = new Date("1900-01-01").getTime()
  },
  methods: {
    // 点击昵称
    handleClickNiceName() {
      this.nickName = this.userInfo?.nickName || ""
      this.showNickName = true
    },
    handleCancelNickName() {
      this.showNickName = false
      this.nickName = ""
    },
    // 选择性别
    async handleSelectSex(data) {
      await uni.$api.user.setMemberData({ sex: data.value })
      await this.$store.dispatch("getUserInfo")
      uni.$toast({ type: "success", content: "修改成功" })
    },
    // 选择生日
    async handleSelectBirthday({ value }) {
      await uni.$api.user.setMemberData({ birthday: uni.$formatDate(value) })
      await this.$store.dispatch("getUserInfo")
      this.showBirthday = false
      uni.$toast({ type: "success", content: "修改成功" })
    },
    // 退出登录
    handleLogout(_, { loading }) {
      this.$refs.dialog.open({
        title: "提示",
        content: "确认退出登录吗？",
        confirmButtonText: "确认退出",
        showCancelButton: true,
        cancelButtonText: "取消",
        onConfirm: async () => {
          loading(true, "退出登录中...")
          await this.$store.dispatch("logout")
          uni.$toast({ mask: true, content: "退出登录成功" })
          setTimeout(() => {
            this.toView({ type: "tab", url: "pages/tabbar/tabbar-5/tabbar-5" })
          }, 1500)
        }
      })
    },
    async handleSetNickName() {
      await uni.$api.user.setMemberData({ nickName: base64.encode(this.nickName) })
      await this.$store.dispatch("getUserInfo")
      this.showNickName = false
      uni.$toast({ type: "success", content: "修改成功" })
    },
    // 选择头像图片上传
    onChooseImage() {
      uni.chooseImage({
        sourceType: ["album", "camera"],
        sizeType: ["original", "compressed"],
        count: 1,
        success: async (res) => {
          const uploadRes = await uni.$api.upload.uploadImage(res.tempFilePaths[0])
          await uni.$api.user.setMemberData({ headImg: uploadRes.url })
          await this.$store.dispatch("getUserInfo")
        },
        fail: (err) => {
          console.log("err: ", JSON.stringify(err))
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
